<template>
  <div
    style="width: 1000px;height: 606px;position: absolute; box-shadow: 0 0 8px 0 black; left: 300px; z-index: 9998;background: #fff;border: 1px silver solid;"
    v-if="isShow" v-drag>
    <div style=" width: 1000px;height: 600px;display: flex;position: relative;">
      <div style="width: 262.13px;height: 606px; overflow: auto;border-right: 1px silver solid;box-shadow: 1px 0 2px 0 silver;">
        <div class="column" v-for="item in userList" :key="item.uid">
          <div @click="friend(item)"
            style="height: 70px;width: 250px;cursor: pointer; margin: 5px;border: 1px solid darkblue; display: flex;">
            <img :src="item.uphoto" alt="" style="width: 60px;height: 60px;margin-top: 5px;margin-right: 5px;">
            <div style="width: 180px;height: 71px;">
              <p style="width: 100%;height: 20px;font-size: 17px;margin-top: 5px;">{{ item.uname }}</p>
              <p v-if="item.chitchat != null" style="color: grey;width: 100%;height: 30px;margin-top: 15px;font-size: 16px;">
                <span v-if="item.chitchat.message != null && item.chitchat.message !== ''">{{ item.chitchat.message }}</span>
                <span v-if="item.chitchat.messageIMG !== null && item.chitchat.messageIMG !== ''">【图片】</span>
                <span v-if="item.chitchat.messageSVG !== null && item.chitchat.messageSVG !== ''">【视频】</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 605px;">
        <LiaoTian />
      </div>
      <div style="position: absolute;right: 5px;cursor: pointer;" @click="isShow = false">
        退出
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import EventBus from '../util/EventBus'
import LiaoTian from './LiaoTian.vue'
export default {
  data () {
    return {
      userList: [],
      myUser: [JSON.parse(sessionStorage.getItem('user'))],
      isShow: false
    }
  },
  methods: {
    friend (user) {
      EventBus.$emit('firend', user)
    },
    getUserList () {
      axios.defaults.withCredentials = true
      axios({
        url: 'http://152.136.143.223:9091/FriendChat/friends/' + this.myUser[0].uid,
        method: 'GET'
      }).then((res) => {
        if (res.data.data != null) {
          if (res.data.data.length > 0) {
            this.userList = res.data.data
          }
        }
        if (this.myUser[0].ustatusID === 0) {
          this.$message('登录后享更多权限')
        }
      })
    }
  },
  components: {
    LiaoTian
  },
  mounted () {
    EventBus.$on('show', (isShow) => {
      if (this.isShow === isShow) {
        this.isShow = false
      } else {
        this.isShow = isShow
      }
    })
  },
  beforeMount () {
    this.getUserList()
  },
  // 自定义指令 实现可拖动
  directives: {
    drag (el, bindings) {
      el.onmousedown = function (e) {
        const disx = e.pageX - el.offsetLeft
        const disy = e.pageY - el.offsetTop
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + 'px'
          el.style.top = e.pageY - disy + 'px'
        }
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
